<!DOCTYPE HTML>
<html>
<head>
<title></title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<link rel="shortcut icon" href="images/favicon.ico" />
<style type="text/css">
@font-face {
  font-family: 'bullets';
  src: url("../static/font/bullets.eot");
  src: url("../static/font/bullets.eot#iefix") format('embedded-opentype'), url("/static/font/bullets.woff") format('woff'), url("../static/font/bullets.ttf") format('truetype'), url("../static/font/bullets.svg#bullets") format('svg');
  font-weight: normal;
  font-style: normal;
}
body{ margin:0;padding:0;text-align:center;background:#F2FFED; }
.container{ width:960px;height:auto;margin:20px auto;padding:10px;border:1px solid #EAEAEA;background:#ffffff;text-align:left; }
.box{ border:1px solid #dedede;margin:10px; }
.dataTable {border-collapse:collapse; width:550px; border:1px solid #4d9ab0;margin:5px;}
.dataTable td {border:1px solid #4d9ab0;word-break: break-all;}
ul.icon
{
	list-style-type: none;
}

ul.icon li
{
	text-indent: -1.4em;
	margin: 0.5em 2em;
}

ul.icon li:before
{
	font-family: bullets;
	content: "\e800";
	float: left;
	width: 1.4em;
	color: #8c8;
}

ul.icon li.info:before { content: "\e800"; }
ul.icon li.heart:before { content: "\e802"; }
ul.icon li.heart-empty:before { content: "\e808"; }
ul.icon li.star:before { content: "\e803"; }
ul.icon li.star-empty:before { content: "\e809"; }
ul.icon li.help:before { content: "\e801"; }
ul.icon li.bulb:before { content: "\e804"; }
ul.icon li.arrow:before { content: "\e806"; }
ul.icon li.hand:before { content: "\e805"; }
ul.icon li.html5:before { content: "\e807"; }

</style>
</head>
<body>
<div class="container">
	<div class="box">
		<ul>
			<li>item 1</li>
			<li>item 2</li>
			<li>item 3</li>
		</ul>
	</div>
	<div class="box">
		<ul class="icon">
			<li class="star">item 1</li>
			<li class="info">item 2</li>
			<li class="help">item 3</li>
		</ul>
	</div>
</div>
</body>
</html>